<template>
    <ZZDialog class="navXZQH" title="地区导航" @close="callbackClose()">
        <div class="flex">
            <p style="width: 240px;">地区：{{ breadcrumb.join(' / ') }}</p>
            <a @click="clear()">返回</a>
        </div>
        <el-tabs  v-model="activeTab" style="padding-left: 10px;">
            <el-tab-pane label="省份" name="provinceTab">
                <div style="display: flex;justify-content: flex-start;align-items: baseline;"  
                v-for="key in ['A-G','H-K','L-S','T-Z']" :key="key">
                    <a style="width: 60px;">{{ key }}</a>
                    <div>
                         <el-button type="text" 
                         v-for="item in provinces[key]" :key="item.code"
                         @click="provincesClick(item)">{{ item.address }}</el-button>
                    </div>
                </div>
            </el-tab-pane>
            <el-tab-pane label="城市" name="cityTab">
                <div>
                    <el-button type="text" 
                    v-for="(name,code) in citys" :key="name"
                    @click="citysClick({'code':code,'address':name})">{{ name }}</el-button>
                </div>
            </el-tab-pane>
            <el-tab-pane label="区县" name="countryTab">
                <div>
                    <el-button type="text" 
                    v-for="(name,code) in countrys" :key="name"
                    @click="countrysClick({'code':code,'address':name})">{{ name }}</el-button>
                </div>
            </el-tab-pane>
        </el-tabs>
    </ZZDialog>
</template>

<script>
import ZZDialog from '../../../common/ZZDialog.vue';
import { ChineseDistricts } from "./city-picker.data";

export default {
    components:{
        ZZDialog
    },
    data(){
        return{
            viewer:undefined,
            activeTab:'provinceTab',
            breadcrumb:[],
            provinces:{},
            citys:'',
            countrys:'',
        }
    },
    beforeMount(){
        this.viewer = this.$store.state.viewer
    },
    mounted(){
        this.provinces = ChineseDistricts['86']
    },
    methods:{
       provincesClick (province){
            this.breadcrumb.length = 1
            this.breadcrumb[0] = province.address

            this.citys = ChineseDistricts[province.code]

            let tempUrl = 'http://data.marsgis.cn/file/geojson/xzqh/shi/'+ province.code.toString().slice(0,2) +'.json'
            this.goToGeojson(tempUrl)

            this.activeTab = 'cityTab'
        },
        citysClick(city){
            this.breadcrumb.length = 2
            this.breadcrumb[1] = city.address
            
            this.countrys = ChineseDistricts[city.code]
            let tempUrl = 'http://data.marsgis.cn/file/geojson/xzqh/xian/'+ city.code +'.json'
            this.goToGeojson(tempUrl)

            this.activeTab = 'countryTab'
        },
        countrysClick (country){
            this.breadcrumb.length = 3
            this.breadcrumb[2] = country.address
        },
        clear(){
            this.activeTab = 'provinceTab'
            this.breadcrumb.length = 0
            this.viewer.dataSources.removeAll()
        },
        async goToGeojson(tempUrl) {
            this.viewer.dataSources.removeAll()
            let geojson = (await fetch(tempUrl)).json()
            let geo_dataSource = Cesium.GeoJsonDataSource.load(geojson, {
                clampToGround: true,
                stroke: new Cesium.Color.fromCssColorString("#ffffff"),
                strokeWidth: 2,
                fill: new Cesium.Color.fromCssColorString("#ffff00").withAlpha(0.5)
            });
            geo_dataSource.then( (dataSource) => {
                this.viewer.dataSources.add(dataSource);
                this.viewer.flyTo(dataSource.entities.values, { duration: 2 });
            })
        },
        callbackClose(){
            this.$emit('close')
            this.viewer.dataSources.removeAll()
        }
    }

}

</script > 
<style scoped>
    .navXZQH{
        position: absolute;
        top: 100px;
        right: 200px;
        height: 500px;
        width: 300px;
    }
    .flex{
        display: flex;
        align-items: center;
        padding-left: 10px; 
    }
    .el-button:first-child {
        margin-left: 12px;
    }
    .el-button{
        height: 32px;
        background-color: transparent !important;
        border: 0px !important;
    }
</style>